<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{width:150px; height:100px; position:absolute; top:40%; left:-150px; background:#9CF;}
#div1 span{width:20px; position:absolute; top:15px; left:150px; background:#9C9;}

</style>

<script type="text/javascript">
onload=function(){
	var oDiv = document.getElementById("div1");
	
	oDiv.addEventListener("mouseover", function(){
		clearInterval(this.t);
		this.t = setInterval(function(){
			if(this.offsetLeft >= 0){
				clearInterval(this.t);
				return;
			}
			this.style.left = this.offsetLeft + 2 + "px";
		}.bind(this),30);
	});
	
	oDiv.addEventListener("mouseout", function(){
		clearInterval(this.t);
		this.t = setInterval(function(){
			if(this.offsetLeft <= -150){
				clearInterval(this.t);
				return;
			}
			this.style.left = this.offsetLeft - 2 + "px";
		}.bind(this),30);
	});
}
</script>
</head>

<body>
<div id="div1"><span >分享到</span></div>
</body>
</html>
 